#loading{
  width: 100%;
  height: 100%;
  background-image: url(../images/loadingBg.jpg);
  background-size: 100% auto;
  position: absolute;
  left: 0;
  top: 0;
}
#loadingProgress{
  position: absolute;
  width: 100%;
  top: 40%;
  color: #fff;
  font-size: 2rem;
  text-align: center;
}

#tip{
  position: absolute;
  width: 50%;
  left: 48%;
  top: 35%;
  color: #fff;
  font-size: 1rem;
  text-align: center;
  writing-mode: vertical-lr;
  display: none;
}

.upTip{
  animation: 3s upTip infinite;
}

@keyframes upTip{
  0%{
    transform: translate(0,0);
    opacity:0.6;
  }
  100%{
    transform: translate(0,-40px);
    opacity:1;
  }
}

.ewm{
  position: absolute;
  left: 50%;
  width: 200px;
  height: 200px;
  margin-left: -100px;
  top: 25%;
  display: none;
}
.ewm img{
  width: 100%;
}

#stage canvas{
  width:100%;
}
.audioBox{
  display: none;
}

#musicIcon{
  width: 40px;
  height: 40px;
  position: absolute;
  right: 20px;
  top: 20px;
  z-index: 9;
  background-size: cover;
}

.mplay{
  background-image: url(../images/musicon.png);
  animation: 1s zhuan infinite linear;
}

.mpause{
  background-image: url(../images/musicoff.png);
}

@keyframes zhuan{
  0%{
    transform: rotate(0)
  }
  100%{
    transform: rotate(360deg)
  }
}

@media screen and (orientation:landscape){
  .wrapper{
    width: 100vh;
    height: 100vw;
    transform: rotate(-90deg);
    transform-origin: 50vh 50vh;
  }
  #stage{
    height: 100%;
  }
  #stage canvas{
    height: 100%;
  }
}